<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>付款</title>
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />
		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>
	</head>
	<body>

		<div class="main" style="border-top: 1px solid #e5e5e5;">
			<div class="pay_container">
				<p style="text-align: center;">总价</p>
				<div class="money">￥{$rs.money}</div>
				<p style="text-align: center;">请您线下支付后，上传支付凭证</p>
				<div class="layui-tab layui-tab-brief">
				  <ul class="layui-tab-title">
				    <li>银行卡支付</li>
				    <li class="layui-this">支付宝支付</li>
				  </ul>
				  <div class="layui-tab-content">
				    <div class="layui-tab-item">
						<h5 style="font-size: 16px; color: #333; font-weight: bold;">银行卡信息</h5>
						<ul class="infos">
							<li><span class="label">收款单位：</span>{$site.bank_danwei}</li>
							<li><span class="label">开户银行：</span>{$site.bank_bankname}</li>
							<li><span class="label">开户支行：</span>{$site.bank_zhihang}</li>
							<li><span class="label">银行卡号：</span>{$site.bank_bankcard}</li>
						</ul>
						<div style="display: flex;">
							<div style="font-size: 16px;font-weight: bold;"><span style="color:red">*</span>上传付款凭证</div>
							<div style="flex:1;margin-left: 10px;">
								<button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="ID-upload-demo-btn1">点击上传</button>
							</div>

						</div>
					</div>
				    <div class="layui-tab-item layui-show">
						<h5 style="font-size: 16px; color: #333;font-weight: bold;">支付宝信息</h5>
						<ul class="infos">
							<li><span class="label">收款单位：</span>{$site.alipay_danwei}</li>
							<li><span class="label">支付宝账号：</span>{$site.alipay_account}</li>
							<li><span class="label">支付宝二维码：</span><img src="{$site.alipay_qrcode}" style="width:50%;height:auto;" /></li>
						</ul>
						<div style="display: flex;">
							<div style="font-size: 16px;font-weight: bold;"><span style="color:red">*</span> 上传付款凭证</div>

							<div style="flex:1;margin-left: 10px;">
								<button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="ID-upload-demo-btn2">点击上传</button>
							</div>

						</div>
					</div>
				  </div>
				</div>
				<img class="layui-upload-img" id="ID-upload-demo-img" style="width: 50%; height: auto; display:block; margin:auto;">
				<input type="hidden" id="image" value="" />
				<div style="margin-top: 20px;">
					<button type="button" class="layui-btn layui-btn-lg layui-btn-fluid layui-bg-red layui-btn-radius" onclick="submit()">确定</button>
				</div>
			</div>
		</div>
	</body>
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn1',
    url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
      });

      //layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){
        console.log(res);
      // 若上传失败
      if(res.code!=1){
        return layer.msg(res.msg);return false;
      }
      // 上传成功的一些操作
      $('#image').val(res.data.url);
    }

  });

  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn2',
    url: '/api.php/common/upload', // 实际使用时改成您自己的上传接口即可。
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
      });

      layer.msg('上传成功', {icon: 6});
    },
    done: function(res){
        console.log(res);
      // 若上传失败
      if(res.code!=1){
        return layer.msg(res.msg);return false;
      }
      // 上传成功的一些操作
      $('#image').val(res.data.url);
      layer.msg('上传成功', {icon: 6});
    }

  });
});

function submit(){
    if($('#image').val().trim()==''){
        layer.msg('请上传付款凭证', {icon: 5});
        return false;
    }
    $.ajax({
          type:"POST",
          url:"/api.php/index/submit_fukuan",
          dataType:"json",
          data:{
              "image":$('#image').val(),
              "order_id":{$rs.id}
          },
          success:function(res){
              console.log(res);

              if(res.code==0){
                  layer.msg(res.msg,{icon:5});

              }else{
                  layer.msg(res.msg,{icon:6},function(){

    				  window.location.href="{:url('user/wode_dingyue')}";
                  });
              }
          }
      });

}
</script>
</html>
